/**
 * 单选按钮
 * @param {*} target 绑定目标对象
 * @param {*} id 唯一标识
 * @param {*} name 名称
 * @param {*} option 可选项
 */
function sRadio(target, id, name, option){
    if(this.initialize) return;
    
    var thiz = target ? target : this;

    option = option ? option : {};

    this.id = id ? id : thiz.id;
    this.name = name ? name : thiz.name;
    this.title = option.title 
        ? option.title 
        : thiz.title
            ? thiz.title
            : "";
    
    var attributes = {
        id: thiz.id,
        name: thiz.name,
        title: thiz.title,
        ...thiz.attributes,
        ...option
    };
    
    sElement.call(this, "sRadio");

    var _status = thiz.checked === "true" || thiz.checked === true;

    var _text = new sText();
    var _layer = new sLayer();
    var _image = new sImage();

    _text.innerText = thiz.title;
    _layer.style = {
        margin: "2,5,0,0",
        width: sRadio.prototype.size ? sRadio.prototype.size.width : 24,
        height: sRadio.prototype.size ? sRadio.prototype.size.height : 24
    };
    _layer.children = [];
    _layer.children.push(_image);
    _layer.setPresentType("image");
    
    _image.src = thiz.checked 
        ? sRadio.prototype.checkedImg
        : sRadio.prototype.uncheckImg;

    var style = thiz.style ? thiz.style : {};
    style.width = style.width ? style.width : 100;
    style.height = style.height ? style.height : _layer.style.height;

    /**
     * 定义style
     */
    Object.defineProperty(this, "style", { 
        get: function(){
            return style;
        },
        set: function(val){
            if(!val || typeof(val) !== "object") return;
            for(let i in val){
                style[i] = val[i];
            }
        },
        enumerable: true
    });

    /**
     * 定义attribute
     */
    Object.defineProperty(this, "attributes", { 
        get: ()=>{
            attributes.width = this.style.width;
            attributes.height = this.style.height;
            return attributes;
        },
        set: (val)=>{
            if(!val || typeof(val) !== "object") return;
            updateAttributes.call(this, val);
        },
        enumerable: true
    });

    /**
     * 更新属性
     * @param attrs
     */
    var updateAttributes = function(attrs){
        attributes = {...attributes, ...attrs};
        
        this.id = attributes.id;
        this.name = attributes.name;
        this.title = attributes.title;

        this.setLabel(this.title);
    }

    /**
     * 定义children
     */
    Object.defineProperty(this, "children", { 
        get: function(){
            return [_layer, _text];
        },
        enumerable: false
    });

    delete this.checked;

    /**
     * 定义是否选中的状态
     */
    Object.defineProperty(this, "checked", { 
        get: function(){
            return _status;
        },
        set: function(status){
            _status = status;
            _image.src = status 
                ? sRadio.prototype.checkedImg 
                : sRadio.prototype.uncheckImg;
        },
        enumerable: true
    });

    /**
     * 添加点击事件
     */
    this.addEventListener("mouseup", (opt)=>{
        if(opt){
            let el = opt.element;

            //限定其他同名同类型元素checked=true时，当前才改变状态
            if(el && (opt.checked === true || opt.checked === "true")){
                this.checked = false;
            }else if(!el){
                this.checked = !this.checked;
            }

            if(opt.callback){
                opt.callback({
                    eventName: "mouseup",
                    name: this.name,
                    checked: this.checked,
                    element: this
                })
            }
        }else{
            this.checked = !this.checked;
        }
    });

    /**
     * 设置标签
     * @param {*} text 
     */
    this.setLabel = function(text){
        _text.innerText = text;
        attributes.title = text;
    }
}

/**
 * 将sElement原型上的方法和属性赋值给sRadio原型
 */
for(let i in sElement.prototype){
    sRadio.prototype[i] = sElement.prototype[i];
}